<!DOCTYPE html>
<!--[if IE 9]>         <html class="no-js lt-ie10" lang="en" xmlns:th="http://www.thymeleaf.org"> <![endif]-->
<!--[if gt IE 9]><!--> <html class="no-js" lang="en" xmlns:th="http://www.thymeleaf.org"> <!--<![endif]-->

<head>
    <meta charset="utf-8">

    <title>AppUI - Web App Bootstrap Admin Template</title>

    <meta name="description" content="AppUI is a Web App Bootstrap Admin Template created by pixelcave and published on Themeforest">
    <meta name="author" content="pixelcave">
    <meta name="robots" content="noindex, nofollow">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <!-- Icons -->
    <!-- The following icons can be replaced with your own, they are used by desktop and mobile browsers -->
    <link rel="shortcut icon" href="../static/img/favicon.png">
    <link rel="apple-touch-icon" href="../static/img/icon57.png" sizes="57x57">
    <link rel="apple-touch-icon" href="../static/img/icon72.png" sizes="72x72">
    <link rel="apple-touch-icon" href="../static/img/icon76.png" sizes="76x76">
    <link rel="apple-touch-icon" href="../static/img/icon114.png" sizes="114x114">
    <link rel="apple-touch-icon" href="../static/img/icon120.png" sizes="120x120">
    <link rel="apple-touch-icon" href="../static/img/icon144.png" sizes="144x144">
    <link rel="apple-touch-icon" href="../static/img/icon152.png" sizes="152x152">
    <link rel="apple-touch-icon" href="../static/img/icon180.png" sizes="180x180">
    <!-- END Icons -->

    <!-- Stylesheets -->
    <!-- Bootstrap is included in its original form, unaltered -->
    <link rel="stylesheet" href="../static/css/bootstrap.min.css">

    <!-- Related styles of various icon packs and plugins -->
    <link rel="stylesheet" href="../static/css/plugins.css">

    <!-- The main stylesheet of this template. All Bootstrap overwrites are defined in here -->
    <link rel="stylesheet" href="../static/css/main.css">

    <!-- Include a specific file here from css/themes/ folder to alter the default theme of the template -->

    <!-- The themes stylesheet of this template (for using specific theme color in individual elements - must include last) -->
    <link rel="stylesheet" href="../static/css/themes.css">
    <!-- END Stylesheets -->

    <!-- Modernizr (browser feature detection library) -->
    <script src="../static/js/vendor/modernizr-3.3.1.min.js"></script>
</head>
<body>
<!-- Full Background -->
<!-- For best results use an image with a resolution of 1280x1280 pixels (prefer a blurred image for smaller file size) -->
<img src="../static/img/placeholders/layout/lock_full_bg.jpg" alt="Full Background" class="full-bg full-bg-bottom animation-pulseSlow">
<!-- END Full Background -->

<!-- Login Container -->
<div id="login-container">
    <!-- Lock Header -->
    <p class="text-center push-top-bottom animation-slideDown">
        <img src="../static/img/0.jpg" alt="avatar" class="img-circle img-thumbnail img-thumbnail-avatar-2x">
    </p>
    <h1 class="text-center text-light push-top-bottom animation-fadeInQuick">
        <strong th:text="${user.name}"></strong><br>
    </h1>
    <!-- END Lock Header -->

    <!-- Lock Form -->
    <form th:action="@{/lock}" method="post" class="form-horizontal push animation-fadeInQuick">
        <div class="form-group" style="margin-bottom: 5px;">
            <div class="col-xs-10 col-xs-offset-1 col-sm-8 col-sm-offset-2">
                <input type="hidden" name="id" th:value="${user.id}">
                <div class="input-group input-group-lg">
                    <input type="password" id="lock-password" name="password" class="form-control form-control-borderless" placeholder="Enter your pass..">
                    <div class="input-group-btn">
                        <button type="submit" class="btn btn-effect-ripple btn-block btn-primary"><i class="fa fa-unlock-alt"></i></button>
                    </div>
                </div>
                <em  style="color: red" th:text="${msg}"></em>
            </div>
        </div>
        <h1 class="text-center text-light push-top-bottom animation-fadeInQuick" style="margin-top: 0;margin-bottom: 0;">
            <em style="margin-left: 30px; font-size: 24px;"></em>
        </h1>

    </form>
    <!-- END Lock Form -->
</div>
<!-- END Login Container -->

<!-- jQuery, Bootstrap, jQuery plugins and Custom JS code -->
<script src="../static/js/vendor/jquery-2.2.4.min.js"></script>
<script src="../static/js/vendor/bootstrap.min.js"></script>
<script src="../static/js/plugins.js"></script>
<script src="../static/js/app.js"></script>
</body>
</html>